<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>时间设置</title>
    <link rel="stylesheet" href="setTime.css">
    <link rel="stylesheet" href="testTime.css">
    <link rel="stylesheet" href="sanjiao.css">
</head>

<body>
    <div class="setTimer">
        <!-- 头部 -->
        <div class="topTime">
            <div class="topLeft">时间设置</div>
            <div class="topRight">
                <div class="rightMag"></div>
                <p>某某管理员</p>
            </div>
        </div>
        <!-- 中间部分 -->
        <div class="centerTime">
            <div class="centerLeft">

                <!-- <p>年级列表</p>
                <div class="unline"></div> -->
                <!-- 水平 -->
                <!-- <div class="leftContent"> -->
                <!-- 在里面加个div 让添加的div放在按钮前面 -->
                <!-- <div class="leftcontetnC"> -->
                <!-- 第一个 -->
                <!-- <div class="studentsContent">
                        <div class="studentsTitle">
                            <div class="whiteBox">
                            </div>
                            <i class="studentsIcon"></i>
                            <div class="studentsClass">一年级</div>
                        </div> -->
                <!-- 姓名 -->
                <!-- <div class="studentsName">
                            <p>某某某</p>
                            <p>某某某</p>
                            <p>某某某</p>
                            <p>某某某</p>
                        </div>
                    </div> -->
                <!-- </div> -->
                <!-- <div class="studentsContent">

                    </div>
                    <div class="studentsContent">

                    </div>  -->

                <!-- 添加 -->
                <!-- <div class="addStudent" id="addbtn">
                        <p>+ &nbsp;添加学生</p>
                    </div>
                </div> -->

                <!-- 学生表格 -->
                <div class="studentMsg">
                    <div class="studentTitle">
                        <div class="worktitle workTime ">
                            <p>作业时间</p>
                        </div>
                        <div class="worktitle stuName ">
                            <p>姓名</p>
                        </div>
                        <div class="worktitle stuClass ">
                            <p>年级</p>
                        </div>
                        <div class="worktitle stuSet ">
                            <p>全选</p>
                        </div>
                    </div>
                    <table class="studentTable" id="table_id">
                        <tr class="studentTr">
                            <td>01:301</td>
                            <td>王小小1</td>
                            <td>一年级2班</td>
                            <td>全选</td>
                        </tr>
                        <tr class="studentTr">
                            <td>01:302</td>
                            <td>王小小2</td>
                            <td>一年级2班</td>
                            <td>全选</td>
                        </tr>
                        <tr class="studentTr">
                            <td>01:303</td>
                            <td>王小小3</td>
                            <td>一年级2班</td>
                            <td>全选</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="centerRight">
                <!-- 垂直分布上面的 -->
                <div class="rightTop">
                    <!-- 水平左边的 （包含年月）-->
                    <div class="leftContents">
                        <div class="rightYear">
                            <p id="showYear">2019</p>
                        </div>
                        <div class="rightMonth">
                            <div class="getMonth">
                                <p id="showMonth">3月</p>
                            </div>
                        </div>
                    </div>
                    <!-- 具体时间 -->
                    <div class="rightContents">
                        <div class="calendar" id="calendar"></div>
                    </div>
                    <!-- 水平右边的 -->
                </div>
                <!-- 垂直分布下面的 -->
                <div class="rightBottom">
                    <div class="setWorkTime">
                        <!-- 作业时间 -->
                        <p>作业时间</p>
                        <div class="unlineTime"></div>
                    </div>
                    <!-- 进度条设置时间 -->
                    <div class="progressBar">
                        <!-- 进度条 -->
                        <!-- 三角形小时分 -->
                        <div class="timeLeft">
                            <!-- 向上的三角形 -->
                            <div class="triangle_border_up" id="addHoursTime">
                            </div>
                            <!-- 小时显示框 -->
                            <input id="hoursChange" class="inputShow" value="0"></input>
                            <!-- 向下的三角形 -->
                            <div class="triangle_border_down" id="reduceHoursTime">
                            </div>
                        </div>
                        <div class="hoursTime">小时</div>
                        <div class="timeRight">
                            <!-- 向上的三角形 -->
                            <div class="triangle_border_up" id="addMinTime">
                            </div>
                            <!-- 小时显示框 -->
                            <input id="minTimeChange" class="inputShow" value="0"></input>
                            <!-- 向下的三角形 -->
                            <div class="triangle_border_down" id="reduceMinTime">
                            </div>
                        </div>
                        <div class="hoursTime">分</div>
                    </div>
                    <!-- 显示的学生 -->
                    <div class="choiceStu">
                        <div class="stuSelectName" id="stuSelectName">
                            <!-- 第一个学生 -->
                            <!-- <div class="stuName_msg">
                                <p id="stuNameShow">
                                    王小小
                                </p>
                                叉掉 -->
                            <!-- <div class="closeStu_msg">
                                    <p>
                                            ×
                                    </p>
                                </div>
                            </div> -->
                        </div>
                    </div>
                    <!-- 完成设置 -->
                    <div class="btn_show" id="btnSpeed">
                        <p>完成设定</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script src="timer.js"></script>
    <script>
        $(document).ready(function () {
            $(".addStudent").click(function () {
                var html = '<div class="studentsContent" id="btnn"></div>';
                // $(".leftContent").append(html); 
                //选择按钮id 设置添加的div在按钮前面（如果要添加在后面就要after）
                $("#addbtn").before(html);
            });
        });
        // 定义不能写在click中
        var arr1 = [];
        var arr = [];
        var stuHtmlBox;
        var divss = [];
        var divObj = [];
        $("#table_id tbody").on("click", "tr", function () {
            var td = $(this).find("td");
            var data = td.eq(1).text();
            // 添加HTML循环
            stuHtmlBox = document.createElement("div");
            var stuNameShow = "";
            // 左边添加到数组里
            arr1.push(data);
            // 清除数组相同的
            var repeat = arr.indexOf(data);
            if (repeat >= 0) {
                alert("已经有了")
            } else {
                console.log(repeat);
                stuNameShow = data;
                stuHtmlBox.innerHTML = "<div class='stuName_msg'><p id='stuNameShow'>" + stuNameShow +
                    "</p><div class='closeStu_msg'><p id='stuNameColse'>" + "×" +
                    "</p></div></div>"
                var ht = document.getElementById("stuSelectName");
                ht.appendChild(stuHtmlBox);
                // 右边数组
                arr.push(stuNameShow);
            }
            // 点击某一个就删除某一个 
            divss = document.getElementsByClassName("closeStu_msg");
            divObj = document.getElementsByClassName("stuName_msg");

            console.log(arr);
            // 点击删除（数组里的和组件）
            $(".closeStu_msg").click(function () {
                $(this).parent().remove();
                var h = $(this).parent().text();
                var hName = h.replace("×","");
                // 获取的下标然而没有用 
                // var hh = arr.indexVf(h1) 
                arr.remove(hName);
                // 查看数组里的(会查看3次)
            })
        });
        // 查找下标
            Array.prototype.indexVf=function(arrs){
            for(var i=0;i<this.length;i++){
                if(this[i]==arrs){
                    return i;
                }
            }
        }
        // 删除
        Array.prototype.remove = function(val) {
        var index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
        }
    };
          // 小时加分钟
          var hoursMin;
        // 添加小时（加一）
        var hoursChange;
        var hoursTitem;
        var hoursTitemAdd;
      
        $("#addHoursTime").click(function() {
            hoursChange=$("#hoursChange").val();
            hoursTitem = Number(hoursChange);
            hoursTitemAdd=parseInt(hoursTitem)+1;
            $("#hoursChange").val(hoursTitemAdd);
            console.log(hoursTitemAdd);
        })
        // 减
        $("#reduceHoursTime").click(function() {
            hoursChange=$("#hoursChange").val();
            hoursTitem = Number(hoursChange);
            if(hoursTitem!=0){
                var hoursTitemRed=parseInt(hoursTitem)-1;
            }else{
                alert("为零了请不要点了！")
            }
            $("#hoursChange").val(hoursTitemRed);
            console.log(hoursTitemRed);
        })
        // 添加分钟
        var minTimeChange;
        var minItem;
        var minItemAdd=0;
        
        $("#addMinTime").click(function () {
            minTimeChange= $("#minTimeChange").val();
            minItem = Number(minTimeChange);
            minItemAdd = parseInt(minItem)+1;
            $("#minTimeChange").val(minItemAdd);
        })
        $("#reduceMinTime").click(function() {
            minTimeChange=$("#minTimeChange").val();
            minItem = Number(minTimeChange);
            if(minItem!=0){
                var minItemRed=parseInt(minItem)-1;
            }else{
                alert("为零了请不要点了！")
            }
            $("#minTimeChange").val(minItemRed);
            console.log(minItemRed);
        })
        // 设置时间
        $("#btnSpeed").click(function() {
            // 可能没有点击
            minItemAdd1=parseInt($("#hoursChange").val());
            minItem1=parseInt($("#minTimeChange").val());

            console.log(minItemAdd1*60);
            var addHoursMin = minItemAdd1*60;
            hoursMin = addHoursMin+minItem1;
            console.log(hoursMin);
        })
    </script>
</body>

</html>